let bannerBox = document.getElementById('banner-box');
let goTop = document.getElementById('goTop');
let allShop = document.getElementById('allshop');
let bannerContainer = document.getElementById('banner-container');
let lis = bannerBox.getElementsByTagName('li');
let spans = bannerBox.getElementsByTagName('span');
let prevBtn = bannerBox.getElementsByClassName('prev')[0];
let nextBtn = bannerBox.getElementsByClassName('next')[0];
let point = bannerBox.getElementsByClassName('point')[0];
let btns = bannerContainer.getElementsByTagName('li');
let smlist = bannerContainer.getElementsByClassName('smlist');
let now = 0;
let timer = null;

let ntime = document.querySelector('.time strong')
let hour = document.querySelector('.time .hour')
let min = document.querySelector('.time .minute')
let sec = document.querySelector('.time .second')
let logo = document.querySelector('.logo')


Ajax.get('./json/goodsOne.json').then(data => {
    // console.log(JSON.parse(data));
    let html = '';
    JSON.parse(data).forEach(goods => {


        html += `<div class="contact" onclick="addGoods('${goods.id}','${goods.src}','${goods.tip1}','${goods.tip2}','${goods.img1}','${goods.img2}','${goods.img3}','${goods.img4}')">
        <img src="${goods.src}">
        <div class="byshop">
            <p class="info">${goods.tip1}</p>
            <p class="price">
                <span style="font-size: 15px;color: #a92112;">￥</span>
                <span style="font-size: 22px;color: #a92112;">${goods.tip2}</span>
                <span style="font-size: 12px;color: #a92112;">起</span>
                <span style="text-decoration: line-through;font-size: 14px;color: #333;">￥${goods.tip3}</span>
            </p>
        </div>
    </div>`

        // console.log(html);
    })

    document.querySelector(".spike-bar .contact-list").innerHTML = html;
})
logo.onclick = function () {
    window.location.href = 'http://127.0.0.1:5500/xiaomiyoupin/index.html'
}
//判断是否登录
let names = localStorage.getItem('已登录')
if (names) {
    let html = ''
    html = `
        <div type="button" style="color:#E7E7E7 ;position: relative;" id="reg">
            <img src="https://img.youpin.mi-img.com/shopcenter/7dhur6i77hg_11350267611625208274363.png" width=30
                alt="">
            <div>我&nbsp;<svg fill="#ccc" xmlns="http://www.w3.org/2000/svg" style="width: 12px;height:7px"
                    viewBox="0 0 40 22.5">
                    <path
                        d="M39.28.72h0a2.49,2.49,0,0,0-3.5,0L20,16.53,4.23.72A2.48,2.48,0,0,0,.72,4.23L18.24,21.78A2.48,2.48,0,0,0,20,22.5a2.52,2.52,0,0,0,1.77-.72L39.28,4.23A2.5,2.5,0,0,0,39.28.72Z">
                    </path>
                </svg>
            </div>
            <ul class="isul">
                <li class="isli">我的订单</li>
                <li>退款/售后</li>
                <li>我的资产</li>
                <li>我的收藏</li>
                <li>地址管理</li>
                <li>退出登录</li>
            </ul>
        </div>`
    document.querySelector("#mycontent").innerHTML = html
    let isul = document.querySelector('.isul')
    let mycontent = document.querySelector('.mycontent')
    mycontent.onmouseover = function () {
        isul.style.display = 'block'
    }
    isul.onmouseout = function (e) {
        isul.style.display = 'none'

    }
    let liObj = isul.children
    Array.from(liObj).forEach((v) => {
        if (v.innerHTML == '退出登录') {
            v.onclick = function () {
                localStorage.removeItem('已登录')
                location.reload()
            }
        }
        if (v.innerHTML == '我的订单') {
            v.onclick = function () {
                location.href='http://127.0.0.1:5500/xiaomiyoupin/user.html'
            }
        }if (v.innerHTML == '我的收藏') {
            v.onclick = function () {
                location.href='http://127.0.0.1:5500/xiaomiyoupin/collect.html'
                
            }
        }if (v.innerHTML == '我的资产') {
            v.onclick = function () {
               location.href='http://127.0.0.1:5500/xiaomiyoupin/asset.html'
            }
        }if (v.innerHTML == '地址管理') {
            v.onclick = function () {
               location.href='http://127.0.0.1:5500/xiaomiyoupin/address.html'
            }
        }
    })
} else {
    let btnCl = document.getElementById('reg')
    btnCl.onclick = function btnClFn() {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            shadeClose: true,
            skin: '',
            btn: ['同意并继续', '不同意'],
            content: `<div class="undefined layout-horizontal-vertical"><span class="close layui-layer-close"><div style="width: 13px; height: 13px; cursor: default;"><svg fill="#ccc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M32.5.68,18,15.17,3.5.68A2,2,0,0,0,.68,3.5L15.17,18,.68,32.5A2,2,0,0,0,3.5,35.32L18,20.83,32.5,35.32a2,2,0,0,0,2.82-2.82L20.83,18,35.32,3.5A2,2,0,0,0,32.5.68Z"></path></svg></div></span><div class="agreement-container"><p class="title">声明与政策</p><div class="content"><p>欢迎您来到小米有品！</p><p>我们依据最新法律法规要求，制定并更新了<a target="_blank" href="https://daren.xiaomiyoupin.com/ewen/pageFromId?id=cxsew05x0x0ch53v" rel="noopener noreferrer">《隐私政策》</a><span class="color-gold">、</span><a target="_blank" href="https://m.xiaomiyoupin.com/mr/60013c77c9e77c0001f35060" rel="noopener noreferrer">《小米有品用户协议》</a>以及<a target="_blank" href="https://m.xiaomiyoupin.com/mr/60014809cff47e0001f66ad6" rel="noopener noreferrer">《小米帐号使用协议》</a>。</p><p>您需阅读并同意相关政策条款方可进行登录。</p></div></div>`
        });
        document.querySelector('.layui-layer-btn0').href='http://127.0.0.1:5500/xiaomiyoupin/login.html'
    }
}

// 2 获取现在时间
function fn() {
    let dateD = new Date()
    let a = dateD.getHours()
    let time = 0
    if (a % 2) {
        a--;
    }

    time = a
    if (a < 10) {
        time = '0' + a + ':00'
        ntime.innerHTML = time
    } else {
        ntime.innerHTML = time + ':00'
    }
    //计算时间
    let timeEnd = new Date()
    timeEnd.setHours(a + 2)
    timeEnd.setMinutes(0)
    timeEnd.setSeconds(0)
    let timeNow = new Date()
    let deff = (timeEnd - timeNow) / 1000
    let h = parseInt(deff / 60 / 60)
    let m = parseInt(deff / 60 % 60)
    let s = parseInt(deff % 60)
    hour.innerHTML = '0' + h
    min.innerHTML = m > 10 ? m : '0' + m
    sec.innerHTML = s > 10 ? s : '0' + s

}
fn()
setInterval(fn, 1000)
let iw = lis[0].offsetWidth;
for (let i = 0; i < lis.length; i++) {
    lis[i].style.left = iw + 'px';
}
lis[0].style.left = 0;

function spanMove() {
    for (let i = 0; i < spans.length; i++) {
        spans[i].className = '';
    }
    spans[now].className = 'active';
}

function next() {
    startMove(lis[now], {
        'left': -iw
    });
    now = ++now > lis.length - 1 ? 0 : now;
    lis[now].style.left = iw + 'px';
    startMove(lis[now], {
        'left': 0
    });
    spanMove();
}

function prev() {
    startMove(lis[now], {
        'left': iw
    });
    now = --now < 0 ? lis.length - 1 : now;
    lis[now].style.left = -iw + 'px';
    startMove(lis[now], {
        'left': 0
    });
    spanMove();
}

timer = setInterval(next, 3000);

bannerBox.onmouseenter = function () {
    clearInterval(timer);
}

bannerBox.onmouseleave = function () {
    timer = setInterval(next, 3000);

}

prevBtn.onclick = function () {
    prev();
}
nextBtn.onclick = function () {
    next();
}

let speed = 180;
let speedTimer = setInterval(function () {
    speed -= 5;
    if (speed <= 0) {
        speed = 180;
    }
}, 500);

goTop.onclick = function () {
    let scrollY = window.scrollY;
    let timer = setInterval(function () {
        scrollY -= speed;
        if (scrollY <= 0) {
            clearInterval(timer);
        }
        window.scrollTo(0, scrollY);
    }, 30);
}
Ajax.get('./json/goodsTwo.json').then(data => {
    // console.log(JSON.parse(data));
    let html = '';
    JSON.parse(data).forEach(goods => {


        html += `<div class="contact" onclick="addGoods('${goods.id}','${goods.src}','${goods.tip1}','${goods.tip3}','${goods.img1}','${goods.img2}','${goods.img3}','${goods.img4}')">
        <img src="${goods.src}">
        <div class="byshop">
            <p class="info">${goods.tip1}</p>
            <p class="infoo" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${goods.tip2}</p>
            <p class="price">
                <span style="font-size: 15px;color: #a92112;">￥</span>
                <span style="font-size: 22px;color: #a92112;">${goods.tip3}</span>
                <!-- <span style="font-size: 12px;color: #a92112;">起</span> -->
            </p>
        </div>
    </div>`

        // console.log(html);
    })
    html = `<div class="title">
    <h2>
        每日新品
        <span>
            每日十点惊喜不断
        </span>
        <span class="more">更多 ></span>
    </h2>
</div>
${html}`
    document.querySelector(".newproduct-bar").innerHTML = html;
})
Ajax.get('./json/goods.json').then(data => {
    // console.log(JSON.parse(data));
    let html = '';
    JSON.parse(data).forEach(goods => {


        html += `<div class="contact" onclick="addGoods('${goods.id}','${goods.src}','${goods.tip2}','${goods.tip3}','${goods.img1}','${goods.img2}','${goods.img3}','${goods.img4}')">
      <img
          src="${goods.src}">
      <div class="title">
          ${goods.tip1}
      </div>
      <div class="info">
          <div>
              <span style="color:white; background: #D96B6C;">特价</span>
          </div>
          <p class="p1">${goods.tip2}</p>
          <p class="p2">
              <span style="font-size: 13px;color: #a92112;">￥</span>
              <span style="font-size: 20px;color: #a92112;">${goods.tip3}</span>
          </p>
      </div>
  </div>`

        // console.log(html);
    })
    html = `<div class="title">
    <h2>
        专属推荐
        <span class="more">更多 ></span>
    </h2>
</div>
${html}`
    document.querySelector(".recommend-bar").innerHTML = html;
})

function addFn() {
    layer.open({
        type: 1,
        title: false,
        closeBtn: 0,
        shadeClose: true,
        skin: '',
        btn: ['同意并继续', '不同意'],
        content: `<div class="undefined layout-horizontal-vertical"><span class="close layui-layer-close"><div style="width: 13px; height: 13px; cursor: default;"><svg fill="#ccc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M32.5.68,18,15.17,3.5.68A2,2,0,0,0,.68,3.5L15.17,18,.68,32.5A2,2,0,0,0,3.5,35.32L18,20.83,32.5,35.32a2,2,0,0,0,2.82-2.82L20.83,18,35.32,3.5A2,2,0,0,0,32.5.68Z"></path></svg></div></span><div class="agreement-container"><p class="title">声明与政策</p><div class="content"><p>欢迎您来到小米有品！</p><p>我们依据最新法律法规要求，制定并更新了<a target="_blank" href="https://daren.xiaomiyoupin.com/ewen/pageFromId?id=cxsew05x0x0ch53v" rel="noopener noreferrer">《隐私政策》</a><span class="color-gold">、</span><a target="_blank" href="https://m.xiaomiyoupin.com/mr/60013c77c9e77c0001f35060" rel="noopener noreferrer">《小米有品用户协议》</a>以及<a target="_blank" href="https://m.xiaomiyoupin.com/mr/60014809cff47e0001f66ad6" rel="noopener noreferrer">《小米帐号使用协议》</a>。</p><p>您需阅读并同意相关政策条款方可进行登录。</p></div></div>`
    });
    document.querySelector('.layui-layer-btn0').href='http://127.0.0.1:5500/xiaomiyoupin/login.html'

}

function addGoods(id, src, tips, price,img1,img2,img3,img4) {

    localStorage.removeItem('now')
    let Good = {
        id,
        src,
        tips,
        price,
        img1,
        img2,
        img3,
        img4
    }
    let arrGood = [Good]
    localStorage.setItem('now', JSON.stringify(arrGood))
    window.location.href = 'http://127.0.0.1:5500/xiaomiyoupin/good.html'
}
for (let i = 0; i < btns.length; i++) {
    btns[i].index = i;
    btns[i].onmouseover = function () {
        for (let j = 0; j < btns.length; j++) {
            smlist[j].style.display = 'none';
        }
        smlist[this.index].style.display = 'block';
    }

}
document.querySelector('#allshop').onmouseleave = function () {
    Array.from(smlist).forEach((v) => {
        v.style.display = "none"
    })
}
let cart = document.querySelector('.cart-icon')
cart.onclick = function () {
    window.location.href = 'http://127.0.0.1:5500/xiaomiyoupin/cart.html'
}
document.querySelector('#license').onclick = function () {
    window.location.href = "https://daren.xiaomiyoupin.com/ewen/pageFromId?id=gurkg3d4bh7bbe6q"
}
document.querySelector('#protocol').onclick = function () {
    window.location.href = "https://daren.xiaomiyoupin.com/ewen/pageFromId?id=ytf4mzipem9cr7fj"
}
